<template>
  <div class="login-manager">
    <!--<video class="login-manager__video" autoplay loop>-->
      <!--<source :src="src" />-->
    <!--</video>-->
    <div class="login-manager__header">
      <div class="login-manager__left-wrapper">
        <div class="login-manager__logo-wrapper">
          <div class="login-manager__logo"></div>
        </div>
        <div class="login-manager__partner-wrapper">
          <div class="login-manager__partner-title">合作伙伴</div>
          <div class="login-manager__partner">AFFILIATES</div>
        </div>
      </div>
      <router-link class="login-manager__close" :to="{name: 'home-page'}">
        <svg-icon icon-class="close"></svg-icon>
        关闭
      </router-link>
    </div>

    <transition
      mode="out-in">
      <router-view></router-view>
    </transition>
  </div>
</template>

<script>
  // import videoSrc from './login.mp4';
  export default {
    name: "login-manager",

    data() {
      return {
        // src: videoSrc
      };
    }
  };
</script>

<style lang="scss">
  @include b(login-manager) {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    @include utils-bg(url(./misc/bg.png) no-repeat no-repeat top center);
    background-size: cover;

    //@include e(video) {
    //  position: absolute;
    //  top: 0;
    //  bottom: 0;
    //  right: 0;
    //  left: 0;
    //  width: 100%;
    //  height: 100%;
    //}

    @include e(header) {
      @include main-center(1190px);
      margin-top: 27px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    @include e(left-wrapper) {
      flex: 1 0 0;
      display: flex;
      color: $--color-white;
      align-items: center;
    }

    @include e(logo-wrapper) {
      margin-right: 15px;
      padding-right: 15px;
      border-right: $--border-base;
      padding-bottom: 5px;
    }
    @include e(logo) {
      @include utils-bg(url(~assets/logo-white.png) no-repeat no-repeat top left);
      width: 190px;
      height: 27px;
    }

    @include e(partner-wrapper) {
    }

    @include e(partner-title) {
      font-size: $--font-size-x-large;
      font-weight: bold;
      margin-bottom: 8px;
    }

    @include e(partner) {

    }


    @include e(close) {
      font-size: 15px;
      color: $--color-white;
      display: flex;
      justify-content: center;
      align-items: center;
      .svg-icon {
        width: 12px;
        height: 12px;
        margin-right: 10px;
      }
    }
    @include b(main-container) {
      width: 510px;
      //height: 100%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      overflow: hidden;
      background: $--color-white;
      border-radius: 6px;

      .link {
        color: $--color-text-placeholder;
      }
    }
  }

  @include b(main-container) {
    box-sizing: border-box;
    padding: 40px 50px 14px;
    @include e(header) {
      width: 100%;
      margin-bottom: 50px;

      .svg-icon {
        width: 14px;
        height: 24px;
        margin-right: 24px;
      }
    }

    @include e(header-btn-inner) {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    @include e(header-btn) {
      width:49.9%;
      .svg-icon {
        width: 14px;
        height: 24px;
        margin-right: 24px;
      }
    }

    @include e(footer) {
      padding:0 50px;
      text-align:center;
    }
    @include e(footer-custom) {
      color: $--color-black-4;
      display: flex;
      align-items: center;
      justify-content: center;
      .svg-icon {
        margin-right: 13px;
      }
    }

    @include e(main) {
      padding-bottom: 22px;
      margin-bottom: 14px;
      border-bottom: 1px solid rgba(222,222,222,1);;
    }

    @include e(links) {
      margin-top: 36px;
    }

    @include e(link) {
      .svg-icon {
        width:4px;
        height:12px;
      }
    }
  }

  @include b(main-container-main) {
    padding-bottom:0;

    @include e(title) {
      font-size: 28px;
      font-weight: bold;
      color: #202124;
      margin-bottom: 60px;
      text-align: center;

      @include m(spacing-small) {
        margin-bottom: 24px;
      }
    }

    @include e(sub-title) {
      font-size: $--font-size-small;
      color: $--color-black-4;
      margin-bottom: 8px;
    }
    @include e(item) {
      position:relative;

      @include m(submit) {
        margin-top: 36px;
      }
    }

    @include e(send-code) {
      position:absolute;
      top:4px;
      right:4px;
      width:129px;
      .el-button {
        height: 42px!important;
        text-align: center;
        padding:0;
        font-size: $--font-size-base;
      }
    }

    @include e(steps) {
      margin-bottom: 60px;
    }


    @include e(radio) {
      margin-bottom: 30px;

      + .el-radio {
        margin-left: 0;
      }
    }

    @include e(radio-label) {
      display: inline-block;
      font-size: $--font-size-base;
      color: $--color-black;
      vertical-align: middle;
    }

    @include e(radio-tip) {
      color: $--color-black-4;
      margin-top: 8px;
    }

    @include e(btn-group) {
      display: flex;
      .el-button {
        flex: 1 0 0;
        + .el-button {
          margin-left: 20px;
        }
      }

    }
    @include e(avatar) {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 40px;
    }
  }
</style>
